<template>
	<div class="subscribe">
		<div class="inner w">
			<div class="sub-title">订阅Pro</div>
			<div class="top-all clearfix">
				<span class="title fl">全局排除词：</span>
				<div class="iner fl">
					<el-tag :key="oi" v-for="(tag,oi) in notkeys" closable :disable-transitions="false" @mouseover.native="hoverText(oi,null,1)" @close="alltopClose(tag,1)">
						{{tag.notkey}}
					</el-tag>
					<!--<el-input class="input-new-tag" size="small" v-if="alltopTagShow" v-model="alltopInputVal" ref="alltopRef" @keyup.enter.native="alltopInputcomfir(1)" @blur="alltopInputcomfir(1)">-->
					<!--</el-input>-->
					<el-button class="button-new-tag" @click="alltopShow($event,1)">+ 添加排除词</el-button>
				</div>
				<div class="right">
					<span>排除：</span>
					<i>{{notkeys[quanjuNow.index]?(notkeys[quanjuNow.index]["e_scope"]==1?'标题匹配、':'正文匹配、'):''}}{{notkeys[quanjuNow.index]?notkeys[quanjuNow.index]["notkey"]:''}}</i>
				</div>

			</div>

			<div class="content">
				<div class="title">
					<span></span> <i>订阅关键词</i>
				</div>
				<div class="item" v-for="(val,index) in datainfo" :key="val.key">
					<div class="fenlei">
						<span class="pub-title">分类：</span>
						<el-tag :key="ii" v-for="(tag,ii) in val.fenlei.Arr" closable :disable-transitions="false" @close="handleClose(tag,index,ii,1)">
							{{tag}}
						</el-tag>
						<el-input v-show="!val.fenlei.spliceArr" size="small" class="input-new-tag" v-if="val.fenlei.TagShow" v-model="val.fenlei.InputVal" ref="tagInput" @keyup.enter.native="$refs.tagInput[0].$refs.input.blur();" @blur="handleInputConfirm(index,1)">
						</el-input>
						<el-button v-show="!val.fenlei.spliceArr" v-else class="button-new-tag" @click="showInput(index,1)">+ 添加分类</el-button>
						<!--2次确定框-->
						<el-dialog :visible.sync="val.fenlei.dialogVisible" width="30%">
							<span>确认删除“分类信息和以下关键词”?</span>
							<span slot="footer" class="dialog-footer">
							    <el-button @click="val.fenlei.dialogVisible = false">取 消</el-button>
							    <el-button type="primary" @click="repeatRemove()">确 定</el-button>
							  </span>
						</el-dialog>
					</div>
					<!--关键词-->
					<div class="guanjianci clearfix">
						<span class="pub-title">关键词：</span>
						<div class="inner-gjc" ref="parent" @dragleave="dragleave($event)" @dragover="dragover($event,index)" @drop="drop($event,index)">
							<div class="taginner" draggable="true" @dragstart='dragstart($event,index,ii)' @drag='drag($event,index,ii)' @dragend='dragend($event)' :key="ii" v-for="(tag,ii) in val.guanjianci.Arr" @mouseover="hoverText(index,ii)">
								<el-tag closable :disable-transitions="false" @close="handleClose(tag,index,ii,2)">
									{{tag}}
								</el-tag>
								<a @click="posFilterDiv($event,index,ii,2)" href="javascript:;"><img src="../assets/paichu-2.png" /></a>
							</div>

							<el-input class="input-new-tag" size="small" v-if="val.guanjianci.TagShow" v-model="val.guanjianci.InputVal" ref="gjcInput" @keyup.enter.native="handleInputConfirm(index,2)" @blur="handleInputConfirm(index,2)">
							</el-input>
							<el-button v-else class="button-new-tag" @click="showInput(index,2)">+ 添加关键词</el-button>
						</div>
						<div class="paichu">
							<span>排除：</span>
							<i>{{datainfo[index].tip[0] == 1?"标题匹配、":(datainfo[index].tip[0] == 2?'全文匹配、':'')}}{{datainfo[index].tip[1]}}</i>
						</div>
					</div>
					<!--匹配范围-->
					<div class="fanwei clearfix">
						<span class="pub-title fl">匹配范围：</span>
						<div class="inner fl">
							<button @click="datainfo[index].fanwei.test = 1" :class="[datainfo[index].fanwei.test == 1?'active':'']">标题匹配</button>
							<button @click="datainfo[index].fanwei.test = 2" :class="[datainfo[index].fanwei.test == 2?'active':'']">正文匹配</button>
						</div>
					</div>
				</div>
				<div class="btn-group">
					<span v-show="pushDadaLen" @click="goLink('push')">推送预览<i>▶</i></span>
					<button @click="reduction">还原</button>
					<!--<button v-if="datainfo[ftNow.index]" class="error">提交</button>-->
					<button @click="submit()">提交</button>
				</div>
			</div>
		</div>
		<div v-show="filterShow" class="filterDiv" ref="filterDiv">
			<div class="top">
				设置排除词
			</div>
			<div class="f-fw clearfix">
				<span class="fl">排除范围：</span>
				<div class="fl">
					<button :class="[filterText == 1 ? 'active': '']" @click="filterText = Number(1)">标题匹配</button>
					<button :class="[filterText == 2 ? 'active': '']" @click="filterText = Number(2)">全文匹配</button>
				</div>
			</div>
			<div class="f-pfc clearfix">
				<span class="fl c">排除词：</span>
				<div class="fl pfc">
					<el-tag :key="tag" v-for="tag in ftArr" closable :disable-transitions="false" @close="alltopClose(tag,2)">
						{{tag}}
					</el-tag>
					<el-input class="input-new-tag" size="small" v-if="ftTagShow" v-model="ftInputVal" ref="ftRef" @keyup.enter.native="alltopInputcomfir(2)" @blur="alltopInputcomfir(2)">
					</el-input>
					<el-button v-else class="button-new-tag" @click="alltopShow($event,2)">+ 添加排除词</el-button>
				</div>
			</div>
			<div class="bottomBtn">
				<button @click="ftShow">确认</button>
				<button @click="ftShow(false)">取消</button>
			</div>
		</div>
	</div>
</template>

<script>
	import { getPro } from '../api/getData.js'
	export default {
		name: 'subscribe',
		data: function() {
			return {
				notkeys: [], //头部数组
				oldNotkeys:[],
				filterShow: false,
				gaoliang: false,
				ftArr: [], //过滤
				ftTagShow: false,
				isStatus: null,
				ftNow: {
					index: 0,
					ii: 0
				},
				quanjuNow: {
					index: 0
				},
				ftInputVal: '',
				filterText: 1,
				test: {
					index: null,
					ii: null
				},
				datainfo: [{
						fenlei: {
							Arr: [],
							TagShow: false,
							InputVal: '',
							spliceArr: false,
							dialogVisible: false,

						},
						guanjianci: {
							Arr: [],
							TagShow: false,
							InputVal: '',
							ftArr: [],
							ftText: []

						},
						fanwei: {
							test: 1
						},
						tip: []
					}

				],
				drap: {
					name: '',
					arr: [],
					test: null,
					index: 0,
					ii: 0
				},
				pushDadaLen: false, //推送按钮
				oldDataInfo: []
			}
		},
		watch: {
			datainfo: {
				handler(newValue, oldValue) {　　
					//console.log(this.oldDataInfo+'ssssssssssss')　　　　
					let temp = JSON.parse(JSON.stringify(this.datainfo))
					let t = temp.map(v => {
						let o = v
						o.tip = []
						return o
					})
					//console.log('s', JSON.stringify(t) === this.oldDataInfo)
					if((JSON.stringify(t) !== this.oldDataInfo) || (JSON.stringify(this.notkeys) !== this.oldNotkeys)) {
						this.pushDadaLen = false
					} else {
						this.pushDadaLen = true
					}　　　
				},
				deep: true
			},
			notkeys: {
				handler(newValue, oldValue) {　
					let temp = JSON.parse(JSON.stringify(this.datainfo))
					
					let t = temp.map(v => {
						let o = v
						o.tip = []
						return o
					})　
					if((JSON.stringify(t) !== this.oldDataInfo) || (JSON.stringify(this.notkeys) !== this.oldNotkeys)){
						this.pushDadaLen = false
					}else{
						this.pushDadaLen = true
					}　　　　
					　
				},
				deep: true
			}
			
			//			datainfo(old,new1){
			//				console.log(old)
			//				console.log('aaaaaaaaaaaas',this.oldDadaInfo == this.datainfo)
			//				if(new1.length > 1){
			//					this.pushDadaLen = true
			//				}else{
			//					this.pushDadaLen = false
			//					
			//				}
			//			}
		},
		created: function() {
			getPro().then(d => {
				if(d.data.status == -1){
					this.$bus.$emit('proShow',false)
					this.$router.push('/applicationInfo')
				}else{
					this.$bus.$emit('proShow',true)
				}
				if(d.data.status == -2){
					this.$bus.$emit('proShow',false)
				}else{
					this.$bus.$emit('proShow',true)
				}
				if(d.data.pro == null) {

					return;
				} else {
					
					let status = d.data.status;
					let pro = d.data.pro || []
					if(status == 1) {
						this.pushDadaLen = true
						this.notkeys = pro.notkeys
						
						for(var i = 0; i < pro.items.length; i++) {
							this.datainfo.unshift({
								fenlei: {
									Arr: [pro.items[i].item],
									TagShow: false,
									InputVal: '',
									spliceArr: true,
									dialogVisible: false,

								},
								guanjianci: {
									Arr: pro.items[i].keys.map(v => v.key),
									TagShow: false,
									InputVal: '',
									ftArr: pro.items[i].keys.map(v => v.notkeys),
									ftText: pro.items[i].keys.map(v => v.e_scope)
								},
								fanwei: {
									test: pro.items[i].m_scope
								},
								tip: []
							})

						}
						this.oldDataInfo = JSON.stringify(this.datainfo)
						this.oldNotkeys = JSON.stringify(this.notkeys)
						console.log('created', JSON.stringify(this.notkeys) === this.oldNotkeys)
					} else if(status == 0) {
						this.$message.error("获取信息失败！！！")
					} else if(status == -1) {
						this.$router.push('/applicationInfo')
					} else {
						this.$message.error("您当前没有订阅Pro的权限！！！")
					}
				}

			})

		}, // 创建时
		computed: {

		},
		beforeMount: function() {}, // 挂载之前
		mounted: function() {
			this.$bus.$emit('footShow', false)

		}, // 挂载之后
		beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
		updated: function() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed: function() {}, // 实例销毁后调用
		methods: {
			alltopClose(tag, type) {
				if(type == 1) {
					this.notkeys.splice(this.notkeys.indexOf(tag), 1);
				} else {

					this.ftArr.splice(this.ftArr.indexOf(tag), 1);

				}

			},

			alltopShow(e, type) {
				if(type == 1) {
					//this.alltopTagShow = false;
					/*this.$nextTick(_ => {
						this.$refs.alltopRef.$refs.input.focus();
					});*/

					this.posFilterDiv(e, null, null, 1)
				} else {
					this.ftTagShow = true;
					this.$nextTick(_ => {
						this.$refs.ftRef.$refs.input.focus();
					});
				}

			},

			alltopInputcomfir(type) {
				if(type == 1) {
					let alltopInputVal = this.alltopInputVal;
					if(alltopInputVal.trim()) {
						this.notkeys.push(alltopInputVal);
						this.notkeys = Array.from(new Set(this.notkeys))
					}
					//					this.alltopTagShow = false;
					this.alltopInputVal = '';
				} else {
					let ftInputVal = this.ftInputVal;
					if(ftInputVal.trim()) {
						this.ftArr.push(ftInputVal);
						this.ftArr = Array.from(new Set(this.ftArr))
					}
					this.ftTagShow = false;
					this.ftInputVal = '';
				}

			},
			/*------------------------------------------------------*/
			handleClose(tag, index, ii, num) {
				if(num == 1) {
					this.datainfo[index].fenlei.dialogVisible = true;
					this.test.index = index
					this.test.ii = ii
				} else {
					let {
						index,
						ii
					} = this.ftNow
					this.datainfo[index].guanjianci.Arr.splice(this.datainfo[index].guanjianci.Arr.indexOf(tag), 1);
					//删除对应数据
					this.datainfo[index].guanjianci.ftArr.splice(ii, 1)
					this.datainfo[index].guanjianci.ftText.splice(ii, 1)
				}

			},
			repeatRemove() {

				let index = this.test.index
				let ii = this.test.ii
				this.datainfo[index].fenlei.dialogVisible = false;
				this.datainfo[index].fenlei.Arr.splice(ii, 1);
				this.spliceArr(index)
				this.datainfo.splice(index, 1)
			},
			handleInputConfirm(index, num) {
				if(num == 1) {
					let inputValue = this.datainfo[index].fenlei.InputVal;
					if(inputValue.trim()) {
						this.datainfo[index].fenlei.Arr.push(inputValue);
						this.datainfo[index].fenlei.Arr = Array.from(new Set(this.datainfo[index].fenlei.Arr))
					}
					this.datainfo[index].fenlei.TagShow = false;
					this.datainfo[index].fenlei.InputVal = '';
					this.spliceArr(index)
					if(this.datainfo[index].fenlei.Arr.length > 0) {

						this.createItem() //创建新的Item
					}
				} else {
					let inputValue = this.datainfo[index].guanjianci.InputVal;
					if(inputValue.trim()) {
						this.datainfo[index].guanjianci.Arr.push(inputValue);
						this.datainfo[index].guanjianci.Arr = Array.from(new Set(this.datainfo[index].guanjianci.Arr))
					}
					this.datainfo[index].guanjianci.TagShow = false;
					this.datainfo[index].guanjianci.InputVal = '';
				}

			},

			showInput(index, num) {
				if(num == 1) {
					this.datainfo[index].fenlei.TagShow = true;
					this.$nextTick(() => {
						this.$refs.tagInput[0].$refs.input.focus();
					});
				} else {
					this.datainfo[index].guanjianci.TagShow = true;
					this.$nextTick(_ => {
						this.$refs.gjcInput[0].$refs.input.focus();
					});
				}

			},
			//分类
			spliceArr(index) {
				let arr = this.datainfo[index].fenlei.Arr.length > 0;
				if(arr) {
					this.datainfo[index].fenlei.spliceArr = true;
				} else {
					this.datainfo[index].fenlei.spliceArr = false;
				}

			},
			posFilterDiv(e, index, ii, num) {
				this.isStatus = false;
				if(index == null) {
					this.isStatus = true;
				}
				if(num == 2) {
					let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
					let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
					let x = e.pageX || e.clientX + scrollX;
					let y = e.pageY || e.clientY + scrollY;
					this.$refs.filterDiv.style.left = x + "px";
					this.$refs.filterDiv.style.top = y + "px";
					this.ftNow = {
						index,
						ii
					}
					this.filterShow = true;
					this.ftArr = this.datainfo[index].guanjianci.ftArr[ii] || [], //过滤
						this.filterText = this.datainfo[index].guanjianci.ftText[ii] || 1
				} else {
					let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
					let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
					let x = e.pageX || e.clientX + scrollX;
					let y = e.pageY || e.clientY + scrollY;
					this.$refs.filterDiv.style.left = x + "px";
					this.$refs.filterDiv.style.top = y + "px";
					this.filterShow = true;
				}

			},
			ftShow(t = true) {
				if(this.isStatus) {
					this.ftArr.forEach(v => {
						this.notkeys.push({
							notkey: v,
							e_scope: this.filterText
						})
					})
					this.ftArr = []
					this.filterText = 1
					this.filterShow = false
					this.hoverText(null, null, 1)

				} else {
					let {
						index,
						ii
					} = this.ftNow
					if(t) {
						this.datainfo[index].guanjianci.ftArr[ii] = this.ftArr
						this.datainfo[index].guanjianci.ftText[ii] = this.filterText
					}
					this.ftArr = []
					this.filterText = 1
					this.filterShow = false
					this.hoverText(index, ii, 2)
				}

			},
			hoverText(index, ii, num) {
				if(num == 1) {
					this.quanjuNow.index = index
				} else {
					this.ftNow = {
						index,
						ii
					}
					let arr1 = this.datainfo[index].guanjianci.ftText[ii] || '标题匹配'
					let arr2 = typeof this.datainfo[index].guanjianci.ftArr[ii] == 'undefined' ? '' : this.datainfo[index].guanjianci.ftArr[ii][0]
					this.datainfo[index].tip = [arr1, arr2]

				}

			},
			createItem() {
				this.datainfo.push({
					fenlei: {
						Arr: [],
						TagShow: false,
						InputVal: '',
						spliceArr: false,
						dialogVisible: false,

					},
					guanjianci: {
						Arr: [],
						TagShow: false,
						InputVal: '',
						ftArr: [],
						ftText: []
					},
					fanwei: {
						test: 1
					},
					tip: []
				})
			},
			submit() {
				var items = [];

				/*this.datainfo.forEach(v => {
					items.push({
						item: v.fenlei.Arr[0],
						m_scope: v.fanwei.test,
						keys: v.guanjianci.Arr.map((value, i) => {
							return {
								key: value,
								e_scope: Number(v.guanjianci.ftText[i]),
								notkeys: v.guanjianci.ftArr[i]
							}
						})
					})

				})*/

				for(var i = 0; i < this.datainfo.length; i++) {
					var ob = {};

					if(!(this.datainfo[i].fenlei.Arr[0] != undefined && this.datainfo[i].guanjianci.Arr.length > 0)) continue;
					ob["item"] = this.datainfo[i].fenlei.Arr[0];
					ob["m_scope"] = this.datainfo[i].fanwei.test

					ob["keys"] = [];

					for(var k = 0; k < this.datainfo[i].guanjianci.Arr.length; k++) {
						var iob = {};
						iob["key"] = this.datainfo[i].guanjianci.Arr[k]
						iob["notkeys"] = this.datainfo[i].guanjianci.ftArr[k]
						iob["e_scope"] = this.datainfo[i].guanjianci.ftText[k]
						ob["keys"].push(iob)

					}

					items.push(ob)
				}

				if(items.length > 0) {
					var objsubmit = {
						notkeys: this.notkeys,
						items: items
					}
					objsubmit = JSON.stringify(objsubmit)

					getPro({
						"reqType": "save",
						"pro": objsubmit

					}).then(d => {
						if(d.data.status == 1) {

							this.$message.success("提交成功！！！")
							this.oldDataInfo = null
							this.oldNotkeys = null
							this.oldNotkeys = JSON.stringify(JSON.parse(JSON.stringify(this.notkeys)))
							let temp = JSON.parse(JSON.stringify(this.datainfo))
							let t = temp.map(v => {
								let o = v
								o.tip = []
								return o
							})
							this.oldDataInfo = JSON.stringify(t)
							this.pushDadaLen = true
						} else if(d.data.status == 0) {
							this.$message.error("提交失败！！！")
						} else if(d.data.status == -1) {
							this.$bus.$emit('proShow',false)
							this.$router.push('/applicationInfo')
						} else {
							
							this.$message.error("您当前没有订阅Pro的权限！！！")
							this.$bus.$emit('proShow',false)
							
							
							
						}
					})
				} else {
					this.$message.error("分类信息或者关键词不能为空！！！")
				}

			},
			reduction() {
				getPro().then(d => {
					let status = d.data.status;
					let pro = d.data.pro || []
					if(status == 1) {
						this.notkeys = pro.notkeys

						this.datainfo = [];
						this.createItem()
						for(var i = 0; i < pro.items.length; i++) {
							this.datainfo.unshift({
								fenlei: {
									Arr: [pro.items[i].item],
									TagShow: true,
									InputVal: '',
									spliceArr: true,
									dialogVisible: false,

								},
								guanjianci: {
									Arr: pro.items[i].keys.map(v => v.key),
									TagShow: false,
									InputVal: '',
									ftArr: pro.items[i].keys.map(v => v.notkeys),
									ftText: pro.items[i].keys.map(v => v.e_scope)
								},
								fanwei: {
									test: pro.items[i].m_scope
								},
								tip: []
							})

						}
					} else if(status == 0) {
						this.$message.error("获取信息失败！！！")
					} else if(status == -1) {
						this.$router.push('/applicationInfo')
					} else {
						this.$message.error("您当前没有订阅Pro的权限！！！")
					}
				})
			},
			goLink(link) {
				this.$router.push(`/${link}`)
			},
			dragstart(e, index, ii) {
				//console.log(index,ii)
				//console.log("目标元素拖动开始")
				this.drap.index = index;
				this.drap.ii = ii;
				this.drap.name = this.datainfo[index].guanjianci.Arr[ii];
				this.drap.arr = this.datainfo[index].guanjianci.ftArr[ii];
				this.drap.test = this.datainfo[index].guanjianci.ftText[ii];

			},
			drag(e, index, ii) {
				//console.log("持续拖动")

			},
			dragend(e) {
				//console.log("拖动结束")

			},

			dragover(e, index) {
				//console.log('拖动元素悬浮在此容器上！',index);
				e.preventDefault();

			},
			dragleave(e) {
				//console.log('拖动元素已离开此容器！');
			},
			drop(e, WarpIndex) {

				let index = this.drap.index
				let ii = this.drap.ii
				this.datainfo[index].guanjianci.Arr.splice(ii, 1)
				this.datainfo[index].guanjianci.ftArr.splice(ii, 1)
				this.datainfo[index].guanjianci.ftText.splice(ii, 1)

				this.datainfo[WarpIndex].guanjianci.Arr.push(this.drap.name)
				this.datainfo[WarpIndex].guanjianci.ftArr.push(this.drap.arr)
				this.datainfo[WarpIndex].guanjianci.ftText.push(this.drap.test)
			}
		} // 函数
	}
</script>

<style lang="scss">
	$im: #2cb7ca;
	$border: #e7e7e7;
	.subscribe {
		background-color: #f8f8fc;
		box-sizing: border-box;
		*,
		*::before,
		*::after {
			box-sizing: inherit;
		}
		.sub-title {
			height: 78px;
			line-height: 78px;
			font-size: 24px;
			color: $im;
		}
		.top-all {
			border: 1px solid $border;
			border-top: 2px solid $im;
			background-color: #fff;
			padding: 25px 0px 15px 10px;
			margin-bottom: 20px;
			font-size: 14px;
			.title {
				display: inline-block;
				height: 32px;
				line-height: 32px;
				margin-left: 15px;
				margin-bottom: 10px;
			}
			.iner {
				width: 800px;
			}
			.el-tag {
				margin-left: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				color: #000;
				.el-icon-close {
					visibility: hidden;
				}
				&:hover {
					background-color: #ecf5ff;
					border-color: #c6e2ff;
					.el-icon-close {
						visibility: visible;
					}
				}
			}
			.button-new-tag {
				width: 150px;
				color: $im;
				margin-left: 10px;
				height: 32px;
				line-height: 30px;
				margin-bottom: 10px;
				padding-top: 0;
				padding-bottom: 0;
				padding-left: 20px;
				text-align: left;
			}
			.input-new-tag {
				width: 150px;
				margin-left: 10px;
				margin-bottom: 10px;
				vertical-align: bottom;
			}
			.right {
				float: left;
				font-size: 15px;
				width: 250px;
				height: 42px;
				line-height: 42px;
				padding-left: 25px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				background: url(../assets/paichu-1.png) 0 center no-repeat;
				i {
					color: $im;
				}
			}
		}
		.content {
			border: 1px solid $border;
			padding: 0 30px 30px 30px;
			background-color: #fff;
			.title {
				height: 90px;
				line-height: 90px;
				font-size: 18px;
				border-bottom: 1px solid $border;
				color: #252627;
				span {
					display: inline-block;
					width: 10px;
					height: 10px;
					background-color: #ffba00;
					border-radius: 100%;
					margin-right: 20px;
				}
			}
			.item {
				border-bottom: 1px solid $border;
				.pub-title {
					display: inline-block;
					font-size: 15px;
					width: 84px;
					height: 40px;
					line-height: 40px;
					text-align: right;
				}
				.fenlei {
					padding: 15px 0;
					.el-tag {
						margin-left: 10px;
						background-color: #fff;
						color: #000;
						.el-icon-close {
							visibility: hidden;
						}
						&:hover .el-icon-close {
							visibility: visible;
						}
					}
					.button-new-tag {
						width: 150px;
						color: $im;
						margin-left: 10px;
						height: 32px;
						line-height: 30px;
						padding-top: 0;
						padding-bottom: 0;
						padding-left: 20px;
						text-align: left;
					}
					.input-new-tag {
						width: 150px;
						margin-left: 10px;
						vertical-align: bottom;
					}
				}
				.guanjianci {
					position: relative;
					.pub-title {
						line-height: 30px;
						float: left;
					}
					.inner-gjc {
						float: left;
						width: 800px;
						.taginner {
							display: inline-block;
							.el-tag {
								position: relative;
								margin-left: 10px;
								background-color: #fff;
								margin-bottom: 10px;
								color: #000;
								.el-icon-close {
									visibility: hidden;
								}
								&:hover .el-icon-close {
									visibility: visible;
								}
								&:hover {
									background-color: #e9f8fa;
									color: $im;
								}
							}
							a {
								display: none;
							}
							&:hover {
								.el-tag {}
								a {
									display: inline-block;
								}
							}
						}
						.button-new-tag {
							width: 150px;
							color: $im;
							margin-left: 14px;
							height: 32px;
							line-height: 30px;
							padding-top: 0;
							margin-bottom: 10px;
							padding-bottom: 0;
							padding-left: 20px;
							text-align: left;
						}
						.input-new-tag {
							width: 150px;
							margin-left: 10px;
							vertical-align: bottom;
							margin-bottom: 10px;
						}
					}
					.paichu {
						float: left;
						font-size: 15px;
						width: 250px;
						height: 42px;
						line-height: 42px;
						padding-left: 25px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						background: url(../assets/paichu-1.png) 0 center no-repeat;
						i {
							color: $im;
						}
					}
				}
				.fanwei {
					padding: 10px 0 20px 0;
					button {
						display: inline-block;
						height: 40px;
						line-height: 40px;
						width: 110px;
						font-size: 14px;
						color: #252627;
						background-color: #fff;
						border: 1px solid $border;
						cursor: pointer;
						margin-left: 12px;
						border-radius: 6px;
						&.active {
							border: 1px solid $im;
							color: $im;
						}
					}
				}
			}
			.btn-group {
				height: 100px;
				line-height: 100px;
				padding-left: 100px;
				span {
					font-size: 15px;
					cursor: pointer;
					color: $im;
					i {
						font-size: 12px;
						margin-left: 4px;
					}
				}
				button {
					display: inline-block;
					width: 160px;
					height: 44px;
					border-radius: 8px;
					background-color: $im;
					color: #fff;
					font-size: 16px;
					margin-left: 15px;
					cursor: pointer;
					&.error {
						opacity: .5;
					}
				}
			}
		}
		.filterDiv {
			display: block;
			width: 430px;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 10px 10px 50px $border;
			border: 1px solid $border;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 999;
			transition: all 0.5s;
			.top {
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid $border;
				background: url(../assets/paichu-2.png) 30px center no-repeat;
				padding-left: 60px;
				font-size: 14px;
				color: #252627;
			}
			.f-fw {
				padding: 12px;
				span {
					height: 32px;
					line-height: 32px;
					width: 80px;
					text-align: right;
					font-size: 15px;
				}
				button {
					display: inline-block;
					width: 120px;
					height: 32px;
					line-height: 32px;
					background-color: #fff;
					border: 1px solid $border;
					border-radius: 7px;
					cursor: pointer;
					margin-left: 15px;
					&.active {
						border: 1px solid $im;
						color: $im;
					}
				}
			}
			.f-pfc {
				.c {
					height: 32px;
					line-height: 32px;
					width: 80px;
					text-align: right;
					font-size: 15px;
				}
				.pfc {
					overflow: hidden;
					width: 300px;
					.el-tag {
						padding-left: 0;
						margin-left: 10px;
						margin-bottom: 10px;
						background-color: #fff;
						color: #000;
						.el-icon-close {
							visibility: hidden;
						}
						&:hover .el-icon-close {
							visibility: visible;
						}
					}
					.button-new-tag {
						width: 150px;
						color: $im;
						margin-left: 10px;
						height: 32px;
						line-height: 30px;
						margin-bottom: 10px;
						padding-top: 0;
						padding-bottom: 0;
						padding-left: 20px;
						text-align: left;
					}
					.input-new-tag {
						width: 150px;
						margin-left: 10px;
						margin-bottom: 10px;
						vertical-align: bottom;
					}
				}
			}
			.bottomBtn {
				height: 70px;
				line-height: 70px;
				overflow: hidden;
				button {
					float: right;
					width: 100px;
					height: 40px;
					border-radius: 6px;
					cursor: pointer;
					background-color: #fff;
					&:nth-of-type(1) {
						background-color: $im;
						color: #fff;
						margin-right: 20px;
					}
				}
			}
		}
	}
</style>